<div class="card-box text-center">
    <div class="card-header">
        <div class="row">
            <div class="col-xs-4">持仓量：234231</div>
            <div class="col-xs-4">成交量：1212</div>
            <div class="col-xs-4">日增仓：121</div>
        </div>
        <div class="row business">
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4">买</div>
                    <div class="col-xs-4 c_r">280.33</div>
                    <div class="col-xs-4">5</div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4">卖</div>
                    <div class="col-xs-4 c_g">280.33</div>
                    <div class="col-xs-4">5</div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-content">
        <table class="table tabel-no-border">
            <thead>
                <tr>
                    <td>时间</td>
                    <td>成交价</td>
                    <td>现手</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan=3 style="padding:0">
                        <ul #ch>
                            <li class="clearfix" *ngFor="let item of realTimeList">
                                <span class="pull-left">{{item.Time | date:'shortTime' | slice:0:5}}</span>
                                <span class="pull-left" [ngClass]="{'price-mutile': item.floating < 0, 'price-add': item.floating > 0}">{{item.CurrentPrice}}</span>
                                <span class="pull-left">{{item.Volume}}</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                            <li class="clearfix">
                                <span class="pull-left">2016.3.3</span>
                                <span class="pull-left">232</span>
                                <span class="pull-left">323</span>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>